<template>
  <div class="commandTab">
    <el-table height="100px" v-adaptive :data="commandList">
      <el-table-column prop="name" label="名称"> </el-table-column>
      <el-table-column prop="token" label="Token"> </el-table-column>
      <el-table-column prop="description" label="说明"> </el-table-column>
      <el-table-column
        prop="parameters"
        :formatter="parametersNumber"
        label="参数"
      >
      </el-table-column>

      <el-table-column label="操作">
        <template slot-scope="scope">
          <div class="btns_box">
            <img
              @click="openCommandDteails(scope.row)"
              src="@/assets/images/yulan.png"
              alt=""
            />
            <img
              @click="handDisable(scope.row)"
              src="@/assets/images/disable.png"
              style="margin: 0 16px"
              alt=""
            />
            <img
              v-permission="[24, 'img']"
              src="@/assets/images/qidong.png"
              @click="handStart(scope.row)"
              alt=""
            />
          </div>
        </template>
      </el-table-column>
      <el-table-column prop="invocationCount" label="调用次数">
      </el-table-column>
    </el-table>
    <Pagination
      @pagination="pagination"
      :total="total"
      :page.sync="pageNum"
      :limit.sync="pageSize"
      :pageSizes.sync="pageSizes"
    />
    <!-- 命令详情 -->
    <command-details
      :isEditbtn="false"
      :deviceTypeToken="deviceTypeToken"
      :detailData="detailData"
      @editCommand="editCommand"
      :commandDteails="commandDteails"
      @openDteails="showDteails"
      @detailsOpenDteails="detailsOpenDteails"
    />
    <CommandEdit
      @handEvent="handEvent"
      ref="commandEditRef"
      :detailData="detailData"
      :showDialog.sync="showDialog"
      :deviceToken="deviceToken"
    />
  </div>
</template>

<script>
import CommandDetails from "../deviceTypePage/CommandDetails.vue";
import Pagination from "@/views/common/page";
import { paginationMixins } from "@/mixin/pagination";
import CommandEdit from "./editCommand.vue";
import { getInvocations } from "@/api/device";
export default {
  mixins: [paginationMixins],
  props: {
    deviceTypeToken: {
      type: String,
      required: true,
    },
    deviceToken: {
      type: String,
      required: true,
    },
  },
  components: {
    CommandDetails,
    Pagination,
    CommandEdit,
  },
  watch: {},
  data() {
    return {
      commandList: [],
      commandDteails: false,
      editCommandDteails: false,
      openEditCommand: {},
      detailData: {},
      showDialog: false,
    };
  },
  mounted() {
    // this.init();
  },
  methods: {
    handEvent(isRefres) {
      this.showDialog = false;
      if (isRefres) {
        this.init();
      }
    },
    // 禁用
    handDisable(row) {},
    // 启动
    handStart(row) {
      this.showDialog = true;
      this.$nextTick(() => {
        this.$refs.commandEditRef.detailData = row;
      });
    },
    init(deviceTypeToken) {
      // 获取命令列表
      var that = this;
      // var prams = { page: 1, pageSize: 10 };
      var that = this;
      var prams = {
        page: this.pageNum,
        pageSize: this.pageSize,
        deviceTypeToken: that.deviceTypeToken,
        deviceToken: this.deviceToken,
      };
      getInvocations(prams).then((res) => {
        const r = res.data;
        this.total = r.numResults;
        that.commandList = r.results;
      });
    },
    //   获取命令列表
    getCommandToken() {
      this.$emit("updateCommandsList");
    },
    // 打开命令详情弹窗
    openCommandDteails(row) {
      this.detailData = row;
      this.commandDteails = true;
    },
    showDteails(data) {
      if (data === "false") {
        this.commandDteails = false;
      } else {
        this.commandDteails = true;
      }
    },
    // 打开编辑弹窗
    editCommand(row) {
      this.commandDteails = false;
      this.editCommandDteails = true;
      this.openEditCommand = row;
    },
    showEditCommand(data) {
      if (data === "false") {
        this.editCommandDteails = false;
      } else {
        this.editCommandDteails = true;
      }
    },
    // 参数转换显示数量
    parametersNumber(row, index) {
      return row.parameters.length + "项";
    },

    // 详情弹窗传过来的
    detailsOpenDteails(data) {
      this.editCommandDteails = data;
      this.commandDteails = false;
    },
  },
};
</script>

<style scoped lang='scss'>
.btns_box {
  display: flex;
  align-items: center;
  height: 100%;
  img {
    width: 16px;
    height: 16px;
    cursor: pointer;
  }
}
.el-pagination {
  margin-left: 0px;
}
</style>